#invite-box{
    background: #f43443;
    padding-bottom: 34rpx;
    font-family:PingFang-SC-Medium;
    .title{
        width: 100%;
        padding: 60rpx 0 0 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: #098bfa;
        text:nth-child(1){
            font-size: 60rpx;
        }
        text:nth-child(2){
            font-size: 40rpx;
        }
        text{
            font-family:PingFang-SC-Medium;
            color: white;
        }
        // image{
        //     width: 545rpx;
        //     height: 147rpx;
        // }
        .bg{
            width: 100%;
            height: 260rpx;
        }
        .invite{
            width: 100%;
            background: #f43443;
            padding: 15rpx 0 30rpx 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            text{font-size: 36rpx;color: white;}
            &-avatar{
                width: 100%;
                padding:60rpx 100rpx 40rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                .inviter-text{
                    position: absolute;
                    font-size: 24rpx;
                    background: #ffed7d;
                    padding: 5rpx 10rpx;
                    border-radius: 50rpx;
                    top: -40rpx;
                    left: 76rpx;
                }
                .inviter{
                    display: flex;
                    align-items: center;
                    // width: 130rpx;
                    flex: 1;
                    image{
                        width: 75rpx;
                        height: 75rpx;
                        margin-left: 8rpx;
                        border-radius: 50%;
                    }
                }
                .friends{
                    flex: 1;
                    // width: 255rpx;
                    justify-content: space-between;
                    // margin-left: 100rpx;
                }
            }
            .btn-invite{
                width: 60%;
                line-height: 80rpx;
                border-radius: 10rpx;
                background: #ffeb44;
                color: #776b03;
            }
        }
    }
    
    .step-box{
        .border{
            margin: 0 55rpx;
            height: 10rpx;
            background: #ffed7d;
            border-radius: 10rpx 10rpx 0 0;
            opacity: 0.2;
        }
        .border2{
            margin: 0 40rpx;
            opacity: 0.4;
        }
        .step{
            margin: 0  24rpx;
            background: #ffed7d;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            flex-direction: column;
            image{
                width: 550rpx;
                height: 600rpx;
                margin-top: 33rpx;
            }
            text{
                padding: 70rpx 0;
                font-size: 46rpx;
                color: white;
                text-shadow: 3px 3px 3px #333333
            }
        }
    }
    .list{
        margin: 34rpx 24rpx 0;
        background: white;
        border-radius: 10rpx;
        .myTab{
            width: 99%;
            margin: 0 auto;
            border-radius: 10rpx;
            .van-tab--active{color: #ffc334;}
            .van-tab__title{font-weight: bold}
            .rank-list{
                margin: 0 20rpx;
                .topThree{
                    padding: 24rpx 0;          
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .no{
                        width: 33.33%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;       
                        .avatar{
                            width: 100%;
                            position: relative;
                            margin-top: 20rpx;
                            margin-left: 120rpx;
                            &-border{
                                width: 120rpx;
                                height: 140rpx;
                                position: absolute;
                                top:0;
                                left: 0;
                                z-index: 9;
                            }
                            &-user{
                                position: absolute;
                                width: 94rpx;
                                height: 94rpx;
                                left: 11rpx;
                                top:33rpx;
                                border-radius: 50%;
                            }
                        }
                        .avatar1{
                            width: 100%;
                            position: relative;
                            margin-top: 0;
                            height: 10px;
                            margin-left: 96rpx;
                            .avatar-border1{
                                width: 150rpx;
                                height: 180rpx;
                                position: absolute;
                                top:0;
                                left: 0;
                                z-index: 9;
                            }
                            .avatar-user1{
                                position: absolute;
                                width: 130rpx;
                                height: 130rpx;
                                left: 11rpx;
                                top:39rpx;
                                border-radius: 50%;
                            }
                        }
                    }
                    .info{
                        margin-top: 160rpx;
                        padding: 0 10rpx;
                        text-align: center;
                        text{
                            margin-top: 20rpx;
                            display: block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 200rpx;
                        }
                        .nickname{
                            font-size: 26rpx;
                            color: #3a393d
                        }
                        .totalFriends{
                            font-size: 24rpx;
                            color: #7d7d7d;
                        }
                        .totalMoney{
                            padding: 10rpx;
                            background: #ffdb34;
                            font-size: 22rpx;
                            color: #d7a803;
                            border-radius: 50px;
                        }
                    }
                    
                }
    
                .rank{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 32rpx 0;
                    border-bottom: 1px solid #d7d7d7;
                    &-info{
                        display: flex;
                        align-items: center;
                        text{
                            font-size: 24rpx;
                            color: #3a393d;
                        }
                        image{
                            width: 70rpx;
                            height: 70rpx;
                            border-radius: 50%;
                            margin-left: 15rpx;
                        }
                        .nickname{
                            margin-left: 20rpx;
                            font-size: 26rpx;
                            width: 238rpx;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    &-total{
                        width: 330rpx;
                        text-align: right;
                        text{
                            display: block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 300rpx;
                        }
                        .totalFriends{color: #7d7d7d;}
                        .totalMoney{
                            padding: 5rpx;
                            background: #ffdb34;
                            color: #d7a803;
                            border-radius: 50px;
                            text-align: center;
                        }
                    }
                }
            }

            .myInviteList{
                margin: 25rpx 15rpx;
                &-title{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 15rpx 0;
                    color: #f43443;
                    background: #ffed7d;
                    font-weight: bold;
                    text{width: 33.33%;text-align: center;font-size: 36rpx;}
                }
                &-item{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 15rpx 0;
                    font-size: 30rpx;
                    text{width: 33.33%;text-align: center;}
                }
            }
        }
        
    }
}
.qrcode-img{
    width: 600rpx;
    height: 600rpx;
}